<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">
		<p:outputPanel>
			<h:form id="bookCategoriesForm">
				<p:commandButton value="add new root" action="#{bookCategoryBackingBean.addRootCategory()}" update="bookCategories" />
				
				<p:dialog id="editCategoryNameDialog" widgetVar="editCategoryNameDialog">
					<h:outputLabel for="selectedCategoryName" value="Category name" />
					<p:inputText id="selectedCategoryName" value="#{bookCategoryBackingBean.selectedNodeName}" autocomplete="false" />
					<p:commandButton id="updateCategoryNameButton" value="Save" action="#{bookCategoryBackingBean.changedCategoryName()}" oncomplete="editCategoryNameDialog.hide()" update="bookCategories" accesskey="s" />
				</p:dialog>

				<p:contextMenu id="bookCategoriesMenu" for="bookCategories">
					<p:menuitem value="edit name" action="#{bookCategoryBackingBean.updateSelectedNodeName()}" oncomplete="editCategoryNameDialog.show()" update="editCategoryNameDialog" />
					<p:menuitem value="add child" actionListener="#{bookCategoryBackingBean.addChild()}" update="bookCategories" />
					<p:menuitem value="remove node" actionListener="#{bookCategoryBackingBean.deleteNode()}" update="bookCategories" />
				</p:contextMenu>				
				
				<p:tree id="bookCategories" var="category" value="#{bookCategoryBackingBean.categoryRoot}" selectionMode="single" selection="#{bookCategoryBackingBean.selectedNode}">
					<p:treeNode>
						<h:outputText id="id#{category.id}" value="#{category.name}" />
					</p:treeNode>
				</p:tree>
			</h:form>
		</p:outputPanel>
	</ui:define>
</ui:composition>
